<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋对战大厅</title>
    <link rel="stylesheet" href="css/game_hall.css">
    <link rel="stylesheet" href="css/pop.css">
</head>
<style>
    button {
        padding: 10px 20px;
        background-color: rgba(133, 237, 47, 0.19);
        color: #090101;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        background-size: 200% auto;
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden; /* 防止内容溢出 */
        position: relative;
        z-index: 1;
    }

    /* 灰粉→灰蓝→雾蓝→水蓝 */
    button:hover {
        background-image: linear-gradient(
                135deg,
                #d4afb9 0%,
                #d1cfe2 25%,
                #9cadce 50%,
                #7ec4cf 75%,
                #d4afb9 100%
        );
        animation: flow 2.5s ease-in-out infinite;
    }

    /* 匹配状态样式 */
    button.matching {
        background-image: linear-gradient(
                135deg,
                #d4afb9 0%,
                #d1cfe2 25%,
                #9cadce 50%,
                #7ec4cf 75%,
                #d4afb9 100%
        );
        animation: flow 2.5s ease-in-out infinite;
    }

    @keyframes flow {
        0% {
            background-position: 0% center;
        }
        100% {
            background-position: -200% center;
        }
    }
</style>
<body>
<div class="container">
    <button class="leaderboard-button" id="leaderboard-button">排行榜</button>

    <!-- 排行榜模态窗 -->
    <div class="modal-overlay" id="leaderboard-modal">
        <div class="modal-content">
            <button class="close-modal">&times;</button>
            <h3 class="modal-title">玩家排行榜</h3>
            <div class="leaderboard-list" id="leaderboard-list">

            </div>
        </div>
    </div>
    <header class="header">
        <h1>五子棋对战大厅</h1>
    </header>

    <main class="content">
        <div class="user-info-card">
            <div class="online-stats">

                <div class="stat-item">
                    <span class="stat-label">大厅在线人数(不包括对局中玩家):</span>
                    <span class="stat-value" id="online-count">0</span>
                </div>

            </div>
            <div class="user-info">
                <div class="user-avatar-placeholder"></div>
                <div class="user-stats" id="user-stats">
                    <!-- 用户信息将通过JavaScript动态填充 -->
                </div>
            </div>

            <div class="match-status" id="match-status">
                <button class="match-button" id="match-button">开始匹配</button>
            </div>
        </div>
    </main>
    <!-- 消息容器 -->
    <div class="toast-container"></div>
</div>

<script src="js/jquery-3.7.1.js"></script>
<script src="js/game_hall.js"></script>
<script src="js/pop.js"></script>

</body>
</html>